<template>
    <a-dropdown class="navUser-wrppaer">
        <div>
            <!-- <img src="../../../assets/nav/user.gif" class="userImg" alt="" /> -->
            <span class="userTitle">{{ accountInfo.userName }}({{ accountInfo.roleName?accountInfo.roleName:'管理员' }})</span>
            <a-icon type="caret-down" style="margin-left: 5px" />
        </div>

        <a-menu slot="overlay">
            <!-- <a-menu-item>
        <router-link to="/userSystem/userInfo">个人中心</router-link>
      </a-menu-item> -->
            <a-menu-item>
                <router-link to="/setting">个人中心</router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click.self="logout">
                <p>退出登录</p>
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</template>

<script>
import { mapState } from 'vuex';
import { getCache} from '@/utils/session';
export default {
    name: 'navUser',
    inject: ['clearTip'],
    data() {
        return {};
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    methods: {
        async logout() {
            try{
                await this.$store.dispatch('setting/changeSpin',true);
                await this.$store.dispatch('user/logout');
                await this.$store.dispatch('setting/changeSpin',false);
                this.$message.success('退出成功')
                this.clearTip();
                await this.$store.dispatch('tagsView/clearTag');
                let tenant = getCache('tenant') || 'master';
                this.$router.replace({
                    path: `/${tenant}/login`
                });
            }catch(err){
                await this.$store.dispatch('setting/changeSpin',false);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.userImg {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: inline-block;
}
.userTitle {
    margin-left: 8px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    // width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
</style>
